<template>
  <Edialog
    title="授权"
    :outershow="empowerShow"
    saveClick
    @close="
      empowerShow = false
      $refs.empowerForm.clearValidate()
    "
    @saveFn="empowerSaveFn"
  >
    <div style="padding: 0 20px">
      <el-form ref="empowerForm" :model="empowerForm" label-width="100px">
        <el-form-item label="角色名称">
          <el-input
            v-model="empowerForm.encoded"
            disabled
            placeholder="管理员"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限列表">
          <div class="empower">
            <el-tree
              ref="tree"
              :data="data"
              show-checkbox
              node-key="id"
              :props="defaultPropstwo"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i
                  v-if="data.ab.type == 1"
                  class="el-icon-menu"
                  style="margin-right: 10px"
                ></i>
                <i
                  v-if="data.ab.type == 2"
                  class="el-icon-s-claim"
                  style="margin-right: 10px"
                ></i>
                <i
                  v-if="data.ab.type == 3"
                  class="el-icon-s-tools"
                  style="margin-right: 10px"
                ></i>
                <span>{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </Edialog>
</template>

<script>
import Edialog from '@/components/Edialog'
import {
  getSysRoleMenuFuncQueryByRoleId,
  postSysRoleMenuFunc,
  getSysMenuFuncCurrTree
} from '@/api/management/role'
import { fd } from '@/utils'
export default {
  name: 'Role',
  components: {
    Edialog
  },
  data () {
    return {
      empowerShow: false,
      empowerForm: {
        encoded: ''
      },
      data: [],
      defaultPropstwo: {
        children: 'children',
        label: 'name'
      },
      roleClickId: ''
    }
  },
  methods: {
    async open (row) {
      this.roleClickId = row.ID
      this.empowerForm.encoded = row.ROLE_NAME
      // 获取系统
      let res = await getSysMenuFuncCurrTree()
      this.data = this.arrayToTreeTwo(res.data.bdata, '')
      // 获取勾选的
      let result = await getSysRoleMenuFuncQueryByRoleId(row.ID)
      console.log('result', result)
      this.empowerShow = true
      // 通过node节点设置
      let exist = Object.values(result.data.bdata)
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(exist)
      })
    },
    // 授权保存按钮
    async empowerSaveFn () {
      // 选中的
      let node = this.$refs.tree.getCheckedNodes()
      if (node.length == 0) {
        return this.$message.error('请先选择！')
      }
      let pid = []
      let id = []
      let result = []
      node.forEach(item => {
        pid.push(item.pid)
        id.push(item.id)
      })
      id.forEach(item => {
        if (!pid.includes(item)) result.push(item)
      })
      let res = await postSysRoleMenuFunc(
        fd({
          roleId: this.roleClickId,
          menuFuncIdStrs: result.join()
        })
      )
      if (res.code == 0 && res.data.bcode == 0) {
        this.$message.success('操作成功')
        this.empowerShow = false
      }
      console.log('result', result) // 拿到的是显示
    },
    arrayToTreeTwo (arr, pid) {
      const list = []
      arr.forEach(v => {
        if (v.pid === pid) {
          list.push(v)
          const children = this.arrayToTreeTwo(arr, v.id)
          if (children.length) v.children = children
        }
      })
      return list
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 20px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 354px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.edialogOne {
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    .toptitle {
      width: 50px;
    }
    .el-input {
      flex: 1;
    }
    .el-button--primary {
      margin-left: 50px;
    }
  }
}
.empower {
  border: 1px solid #dcdfe6;
  height: 400px;
  overflow: hidden auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
